(function(){
	var svgwidth=$('#svgbox').parent().width(),//svg宽
		svgheight=svgwidth*3/4,//svg高
		svgpathheight=svgheight*0.7,//svgpath高
		svglineheight=svgheight*0.3,//svg柱状图高
		svgpathline=svgpathheight/6,//svg横线间隔
		svgline=svglineheight/2;//svg柱状图横线间隔
	$('#svgbox').width(svgwidth).height(svgheight);//设置svg绘图大小
//	console.log(svgpathline)
	
	var dsvg=$('#svgbox').find('g').eq(0);
	//表格绘制
	bakc()
	function bakc(){
		//竖线  中间
		var shulineone=makeSVG('line', {x1: svgwidth*svg['p1'], x2: svgwidth*svg['p1'], y1:0, y2:svgpathheight, stroke: '#ccc'});//中间1
			dsvg.append(shulineone);
		var shulinetwo=makeSVG('line', {x1: svgwidth*svg['p2'], x2: svgwidth*svg['p2'], y1:0, y2:svgpathheight, stroke: '#ccc'});//中间2
			dsvg.append(shulinetwo);
		//横线  柱体
		var orlone=makeSVG('line', {x1: 0, x2: svgwidth, y1:svgheight*0.7+svgline*1, y2:svgheight*0.7+svgline*1, stroke: '#ccc'});
			dsvg.append(orlone);
		var orltwo=makeSVG('line', {x1: 0, x2: svgwidth, y1:svgheight*0.7+svgline*2-1, y2:svgheight*0.7+svgline*2-1, stroke: '#ccc'});
			dsvg.append(orltwo);
		//横线  path
		for(var i=0;i<6;i++){
			var henline=makeSVG('line', {x1: 0, x2: svgwidth, y1:svgpathline*(i+1), y2:svgpathline*(i+1), stroke: '#ccc'});
			dsvg.append(henline);
		}
		var timelang=0;
		$.map(timetest, function(val,i) {
			var timeho=parseInt(val.substr(0,2)),timeht=parseInt(val.substr(6,2)),
				timeso=parseInt(val.substr(3,2)),timest=parseInt(val.substr(9,2));
			timelang+=(timeht-timeho)*60+timest-timeso;
			svg['lang']=timelang;
//			console.log(timelang)
		});
//		console.log(timetest)
		if(timetest.length>0){
			dsvg.find('text').eq(0).find('tspan').html((timetest[0]).substr(0,5));
			dsvg.find('text').eq(1).find('tspan').html((timetest[0]).substr(6,5));
			dsvg.find('text').eq(2).find('tspan').html((timetest[timetest.length-1]).substr(0,5));
			dsvg.find('text').eq(3).find('tspan').html((timetest[timetest.length-1]).substr(6,5));
			var p1=((parseInt((timetest[0]).substr(6,2))-parseInt((timetest[0]).substr(0,2)))*60+parseInt((timetest[0]).substr(9,2))-parseInt((timetest[0]).substr(3,2)))/svg['lang'],
				p2=( svg['lang']- (( parseInt(timetest[timetest.length-1].substr(6,2)) - parseInt(timetest[timetest.length-1].substr(0,2)) )*60 + parseInt(timetest[timetest.length-1].substr(9,2)) - parseInt(timetest[timetest.length-1].substr(3,2)) ) )/svg['lang'];
			dsvg.find('text').eq(1).attr({'x':svgwidth*p1-13,'y':svgheight*0.7+14});//中间1
			dsvg.find('text').eq(2).attr({'x':svgwidth*p2-13,'y':svgheight*0.7+14});//中间2
			dsvg.find('text').eq(0).attr({'x':5,'y':svgheight*0.7+13});//开始
			dsvg.find('text').eq(3).attr({'x':svgwidth-27,'y':svgheight*0.7+14});//结束
		}else{
			dsvg.find('text').eq(0).find('tspan').html((timetest[0]).substr(0,5));
			dsvg.find('text').eq(1).find('tspan').html(parseInt(timetest[0].substr(0,2))+2+':00');
			dsvg.find('text').eq(2).find('tspan').html(parseInt(timetest[0].substr(6,2))-2+':00');
			dsvg.find('text').eq(3).find('tspan').html((timetest[0]).substr(6,5));
			var p1=(2*60)/svg['lang'],
				p2=(svg['lang']-2*60)/svg['lang'];
			dsvg.find('text').eq(1).attr({'x':svgwidth*p1-13,'y':svgheight*0.7+14});//中间1
			dsvg.find('text').eq(2).attr({'x':svgwidth*p2-13,'y':svgheight*0.7+14});//中间2
			dsvg.find('text').eq(0).attr({'x':5,'y':svgheight*0.7+13});//开始
			dsvg.find('text').eq(3).attr({'x':svgwidth-27,'y':svgheight*0.7+14});//结束
		}
	};
	//拿数据
	fenjson()
	//setInterval(fenjson,1000)
	function fenjson(){
		$.getJSON(urlfen, function(data){
//			console.log(data)
			inits(data)
		});
	}
function inits(data){
	

	
	pathdata=[],linedata=[];
    maxdatapath=parseFloat(data[0][svgdataname[0]]);
    mindatapath=parseFloat(data[0][svgdataname[0]]);
    maxdataline=parseFloat(data[0][svgdataname[1]]);
    $.map(data, function(val,i) {
   		var ys=parseFloat(val[svgdataname[0]]),
   			zs=parseFloat(val[svgdataname[1]]);
		maxdatapath=maxdatapath>ys ? maxdatapath :ys;
		mindatapath=mindatapath>ys ? ys : mindatapath;
		maxdataline=maxdataline>zs ? maxdataline :zs;
		pathdata.push(ys);
		linedata.push(val[svgdataname[1]]);
//		console.log(data)
	});
//	dsvg.find('text').eq(4).find('tspan').html(maxdatapath);
//	dsvg.find('text').eq(5).find('tspan').html(mindatapath);
	picdark();
	linedark();
	circle();
}
	//path区域
	var osvg=$('#svgbox').find('g').eq(1),
		osvgline=osvg.find('path').eq(1),
		osvgpic=osvg.find('path').eq(0),
		maxdatapath,mindatapath,last,maxdataline,
		pathdata=new Array(),
		linedata=new Array();
	
	function picdark(){	
		var start=svgpathheight/(maxdatapath-mindatapath)*(pathdata[0]-mindatapath),
			lineone='',linetwo='',
			jiange=maxdatapath-mindatapath,
			baifen=svgwidth/svg['lang'];
			lineone="M 0,"+(svgpathheight-start)
//		console.log(pathdata);
		$.map(pathdata, function(val,i) {
			var bod=(val-mindatapath)*svgpathheight/jiange;
			//console.log(+'/'+)
			lineone+="L"+(i+1)*baifen+","+(svgpathheight-bod);
		});
		lineone=lineone+"L"+pathdata.length*baifen+","+svgpathheight +"L"+0+","+svgpathheight +"Z";
		
		var linetwo="M 0,"+(svgpathheight-start);
		$.map(pathdata, function(val,i) {
			var bod=(val-mindatapath)*svgpathheight/jiange;
			last=bod;
			linetwo=linetwo+"L"+(i+1)*baifen+","+(svgpathheight-bod);
		});
		osvgline.attr('d',linetwo);
		osvgpic.attr('d',lineone);
	};
	//柱状图
	var linesvg=$('#svgbox').find('g').eq(2);
	function linedark(){
		linesvg.find('line').remove();
		var htmls='',baifen=svgwidth/svg['lang'];
		maxdataline+=10;
		$.map(linedata, function(val,i) {
			var henline=makeSVG('line', {x1:i*baifen, x2: i*baifen, y1:svgheight, y2:svgheight-(svglineheight/maxdataline*val), stroke: '#d0402d','stroke-width':baifen});

			linesvg.append(henline);
		});
	};
	//绘制圆
	function circle(){
		osvg.find('circle').remove();
		var baifen=svgwidth/svg['lang'];;
		var circle= makeSVG('circle', {cx: pathdata.length*baifen, cy: (svgpathheight-last), r:2, stroke: 'none', 'stroke-width': "none", fill: 'red'});
		osvg.append(circle);
//		console.log()
	}
})()
//动态加载SVG对象
function makeSVG(tag, attrs) {
    var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
    for (var k in attrs)
        el.setAttribute(k, attrs[k]);
    return el;
}





(function(){
	var max,min,jj;
	var svgwidth=$('#svgfie').parent().width(),//svg宽
		svgheight=svgwidth*3/4,//svg高
		svglinewidth=svgwidth/fiesvg['lang'];
	$('#svgfie').width(svgwidth).height(svgheight);//设置svg绘图大小
	fiejson()
//	setInterval(fiejson,1000)
	function fiejson(){
		$.getJSON(urlfie, function(data){
			initt(data)
		});
	};
function initt(data){
	if(svgwidth<320){
		var ops;
		ops=(data.slice(0,20)).reverse();
		svglinewidth=svgwidth/20;
		linepath(ops);
		console.log(ops)
		for(var i=0;i<5;i++){
			if(i==0){
				dsvgtextw.find('text').eq(i).find('tspan').html(ops[0]['Date'].substring(11,16));
			}else{
				dsvgtextw.find('text').eq(i).find('tspan').html(ops[i*5-1]['Date'].substring(11,16));
			}
		}
//		dsvgtextw.find('text').eq(0).find('tspan').html(ops[0]['Date'].substring(11,16));
	}else{
		var ops;
		ops=(data.slice(0,40)).reverse();
		svglinewidth=svgwidth/40;
		linepath(ops);
		console.log(ops);
		for(var i=0;i<5;i++){
			if(i==0){
				dsvgtextw.find('text').eq(i).find('tspan').html(ops[0]['Date'].substring(11,16));
			}else{
				dsvgtextw.find('text').eq(i).find('tspan').html(ops[i*10-1]['Date'].substring(11,16));
			}
		}
	}

}
	var pathsvg=$('#svgfie').find('g').eq(3);
	function linepath(linearray){
		max=linearray[0]['Open'];
		min=linearray[0]['Open'];
		$.map(linearray, function(val,i) {
			max=max>val['Open'] ?max:val['Open'];
			max=max>val['Close']?max:val['Close'];
			max=max>val['High'] ?max:val['High'];
			max=max>val['Low'] ?max:val['Low'];
			
			min=min>val['Open'] ? val['Open']:min;
			min=min>val['Close'] ? val['Close']:min;
			min=min>val['High'] ? val['High']:min;
			min=min>val['Low'] ? val['Low']:min;
		
		});
		jj=(svgheight-10)/(max-min);
//		console.log('max='+max+'/min='+min+'/jj='+jj);
		pathsvg.find('line').remove();
		pathsvg.find('path').remove();
		dsvgtexth.find('text').eq(0).html(max);
		dsvgtexth.find('text').eq(1).html(min);
		$.map(linearray, function(val,i) {
			if(val['Close']>val['Open']){
				var henline=makeSVG('line', {x1:i*svglinewidth, x2: i*svglinewidth, y1:svgheight-10-(parseFloat(val['High'])-min)*jj, y2:svgheight-10-(parseFloat(val['Low'])-min)*jj, stroke: '#db4c3c','stroke-width':1});
				pathsvg.append(henline);
				var M0=i*svglinewidth-(svglinewidth/2-1),
					M1=i*svglinewidth+(svglinewidth/2-1),
					L1=svgheight-10-(parseFloat(val['Close'])-min)*jj,
					L2=svgheight-10-(parseFloat(val['Open'])-min)*jj;
				var mvto='M'+M0+','+L1+'L'+M1+','+L1+'L'+M1+','+L2+'L'+M0+','+L2+'L'+M0+','+L1+'Z';
//				console.log(val['Date']);
				var henpath=makeSVG('path', { d:mvto,fill:'#db4c3c', stroke:'#db4c3c','stroke-width':'1',"stroke-opacity":"1",cs:"100,100"});
				pathsvg.append(henpath);
			};
			if(val['Open']>val['Close']){
				var henline=makeSVG('line', {x1:i*svglinewidth, x2: i*svglinewidth, y1:svgheight-10-(parseFloat(val['High'])-min)*jj, y2:svgheight-10-(parseFloat(val['Low'])-min)*jj, stroke: '#7f8da9','stroke-width':1});
				pathsvg.append(henline);
				var M0=i*svglinewidth-(svglinewidth/2-1),
					M1=i*svglinewidth+(svglinewidth/2-1),
					L1=svgheight-10-(parseFloat(val['Open'])-min)*jj,
					L2=svgheight-10-(parseFloat(val['Close'])-min)*jj;
				var mvto='M'+M0+','+L1+'L'+M1+','+L1+'L'+M1+','+L2+'L'+M0+','+L2+'L'+M0+','+L1+'Z';
				var a=val['Date'].substring(11,16);
//				console.log(a);
//				console.log((val['Date']).getHours());
				var henpath=makeSVG('path', { d:mvto,fill:'#7f8da9', stroke:'#7f8da9','stroke-width':'1',"stroke-opacity":"1",cs:"100,100"});
				pathsvg.append(henpath);
			}
		});
		
	}
	var dsvg=$('#svgfie').find('g').eq(0),
		dsvgtexth=$('#svgfie').find('g').eq(1),
		dsvgtextw=$('#svgfie').find('g').eq(2);
	bakc()
	function bakc(){
		//横线  path
		for(var i=0;i<8;i++){
			var henline=makeSVG('line', {x1: 0, x2:svgwidth, y1:svgheight/8*(i+1)-10, y2:svgheight/8*(i+1)-10, stroke: '#ccc'});
			dsvg.append(henline);
		}
		for(var i=0;i<5;i++){
			var shuline=makeSVG('line', {x1: svgwidth/4*i, x2: svgwidth/4*i, y1:0-10, y2:svgheight-10, stroke: '#ccc'});
			dsvg.append(shuline);
		}
		var fietimename = ['time1','time2','time3','time4','time5','time6'];
		dsvgtextw.find('text').eq(0).attr({'x':0,'y':svgheight});
		dsvgtextw.find('text').eq(1).attr({'x':svgwidth/4*1-14,'y':svgheight});
		dsvgtextw.find('text').eq(2).attr({'x':svgwidth/4*2-14,'y':svgheight});
		dsvgtextw.find('text').eq(3).attr({'x':svgwidth/4*3-14,'y':svgheight});
		dsvgtextw.find('text').eq(4).attr({'x':svgwidth-26,'y':svgheight});
//		dsvgtextw.find('text').eq(5).attr({'x':svgwidth-27,'y':svgheight});
		var fiepointname = ['最高','最低'];
		dsvgtexth.find('text').eq(0).attr({'x':svgwidth-31,'y':+10}).find('tspan').html(fiepointname[0]);
		dsvgtexth.find('text').eq(1).attr({'x':svgwidth-31,'y':svgheight-20}).find('tspan').html(fiepointname[1]);
	};
})()


